// 页面数据，此处为演示数据
var pageData = {
    // 导航菜单
    navs: {
        "mid": 0,
        "menus": [
            {
                "id": 0,
                "title": "推荐"
            },
            {
                "id": 1,
                "title": "数学"
            },
            {
                "id": 2,
                "title": "英语"
            },
            {
                "id": 3,
                "title": "物理 "
            },
            {
                "id": 4,
                "title": "化学"
            },
            {
                "id": 5,
                "title": "美术"
            },
            {
                "id": 6,
                "title": "少儿编程"
            }
        ]
    },
    // 轮播图
    carousel: [

    ],
    // 服务列表
    services: [

    ]
};

$(function () {
    // 此处应该发起Ajax，拉去首页数据
    $.ajax({
        url:'/service/list',
        type:'post',
        data: {"type": 0},
        dataType:'json',
        success:function (result) {
            for (let i=0;i<result.length;i++){
               let service = {
                   "id":result[i].cid,
                   "image":result[i].cimages,
                   "title":result[i].ctitle,
                   "summary":result[i].csummary,
                   "address":result[i].mechanism.maddress,
                   "sell":result[i].csell
               };
               pageData.services.push(service);
                let img = {
                    "img":result[i].cimages,
                    "url":"/service/shop?id="+result[i].cid
                };
                pageData.carousel.push(img);
            }
        }
    });
    // 成功获取数据后，初始化Vue实例
    initVue();

});

/**
 * 初始化Vue实例
 */
function initVue() {
    // 初始化Vue实例
    var vue = new Vue({
        el: "#app",
        data: {
            pd: pageData
        },
        mounted: function(){
            initSwiper();
        },
        updated: function () {

        },
        methods: {
            changeMenu: function(mid){
                this.pd.navs.mid = mid;
                $.ajax({
                    url: '/service/list',
                    type: 'post',
                    data: {"type": pageData.navs.mid},
                    dataType: 'json',
                    success: function (result) {
                        pageData.services=[];
                        pageData.carousel=[];
                        for (let i=0;i<result.length;i++){
                            let service = {
                                "id":result[i].cid,
                                "image":result[i].cimages,
                                "title":result[i].ctitle,
                                "summary":result[i].csummary,
                                "address":result[i].mechanism.maddress,
                                "sell":result[i].csell
                            };
                            pageData.services.push(service);
                            let img = {
                                "img":result[i].cimages,
                                "url":"/service/shop?id="+result[i].cid
                            };
                            pageData.carousel.push(img);
                        }
                    }
                });
            }
        }
    });
}

/**
 * 初始化轮播图
 */
function initSwiper() {
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay:true,
        pagination: {
            el: '.swiper-pagination',
        },
    });
}

